<template>
  <div class="container">
    <div class="back-top">
      <p>新建巡检任务</p>
      <el-button
        class="back-btn"
        @click="handleGoback"
        type="primary"
        icon="el-icon-back"
        >返回</el-button
      >
    </div>
    <el-form label-width="140px" ref="addForm" :rules="rules" :model="addForm">
      <el-row>
        <el-col :span="5">
          <el-form-item label="场景名称">
            {{ detailObj.scenario_name }}
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="场景编号">
            {{ detailObj.scenario_no }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="场景下任务数">
            {{ detailObj.job_num }}
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="创建时间">
            {{ detailObj.created_at }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="任务名称" prop="job_name">
            <el-input
              v-model="addForm.job_name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="任务编号" prop="job_no">
            <el-input v-model="addForm.job_no" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="巡检计划开始时间" prop="inspection_start_time">
            <el-date-picker
              style="width: 100%"
              v-model="addForm.inspection_start_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预计时长">
            <!-- v-model="addForm.entry_date" -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="温度预警值（℃）" prop="temp_alarm">
            <el-input
              v-model="addForm.temp_alarm"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="湿度预警值（%）" prop="humi_alarm">
            <el-input
              v-model="addForm.humi_alarm"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <hr />
    <div class="point-selection">
      <div class="left">
        <p>点位选择:</p>
        <div class="point-img-right">
          <img src="@/assets/robot/map1.png" alt="" />
        </div>
      </div>
      <div class="right">
        <h3>任务点位选择</h3>
        <div class="right-flex">
          <div class="right-left-box">
            <p class="all-point-bit">所有点位</p>
            <div class="grou">
              <div>
                <!-- v-model="checkbox" -->
                <el-checkbox-group v-model="checkboxList" @change="radioChange">
                  <el-checkbox
                    v-for="(item, index) in arrList"
                    :key="index"
                    :label="item.point_name"
                    :disabled="item.disabled"
                    >{{ item.point_name }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
              <!-- v-if="behaviorState" -->
              <!-- <div>
                <el-checkbox-group
                  v-model="checkedCities"
                  @change="checkboxChange"
                >
                  <el-checkbox
                    v-for="city in cities"
                    :label="city"
                    :key="city"
                    :disabled="moState && city == '默认行为' ? true : false"
                    >{{ city }}</el-checkbox
                  >
                </el-checkbox-group>
              </div> -->
            </div>
          </div>
          <div class="join-center">
            <!-- 这个事件是有点位的@click="handleClick" -->
            <el-button @click="handleClickArrow"
              >加入已选<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </div>
          <div class="right-clear">
            <div class="right-box">
              <p class="all-point-bit">已选点位</p>
              <div class="selected-point-bit">
                <div class="point-content">
                  <el-checkbox-group
                    v-model="allcheckedCities"
                    @change="checkboxHandleChange"
                  >
                    <el-checkbox
                      v-for="(city, index) in citiesList"
                      :label="city.point_name"
                      :key="index"
                      >{{ city.point_name }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
                <div class="delete-clear">
                  <el-button class="clear-btn" @click="handleDelete"
                    >删除</el-button
                  >
                  <el-button class="clear-btn" @click="handleEmpty"
                    >清空</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-submit">
      <el-button type="primary" @click="patrolInspectionTaskSubmit"
        >保 存</el-button
      >
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { patrolInspectionTaskApi } from "@/services/Robot";
import _ from "lodash";

export default {
  data() {
    return {
      addForm: {
        scenario_name: "",
        scenario_no: "",
        job_name: "",
        job_no: "",
        dog_name: "",
        dog_no: "",
        inspection_start_time: "",
        duration: "",
        temp_alarm: "",
        humi_alarm: "",
      },
      rules: {
        job_name: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
        job_no: [
          { required: true, message: "请输入任务编号", trigger: "blur" },
        ],
        // scenario_name
        scenario_name: [
          { required: true, message: "请输入场景名称", trigger: "change" },
        ],
        scenario_no: [
          { required: true, message: "请输入场景编号", trigger: "change" },
        ],
      },
      hour: "",
      minutes: "",
      props: { multiple: true },
      list: [],
      arrList: [
        {
          point_x: 123,
          point_y: 456,
          disabled: false,
          point_name: "xunluo147395",
          children: [
            {
              value: 1,
              label: "行为1",
            },
            {
              value: 2,
              label: "行为2",
            },
            {
              value: 3,
              label: "行为3",
            },
          ],
        },
        {
          point_x: 3,
          point_y: 46,
          disabled: false,
          point_name: "xunluo2",
          children: [
            {
              value: 1,
              label: "行为5",
            },
            {
              value: 2,
              label: "行为23434",
            },
            {
              value: 3,
              label: "行为3343",
            },
          ],
        },
        {
          point_x: 23,
          point_y: 6,
          disabled: false,
          point_name: "xunluo3",
          children: [
            {
              value: 1,
              label: "行为132323",
            },
            {
              value: 2,
              label: "行为223242",
            },
            {
              value: 3,
              label: "行为334343",
            },
          ],
        },
        {
          point_x: 3,
          point_y: 45,
          disabled: false,
          point_name: "xunluo4",
          children: [
            {
              value: 1,
              label: "行为13434",
            },
            {
              value: 2,
              label: "行为223232",
            },
            {
              value: 3,
              label: "行为3232",
            },
          ],
        },
        {
          point_x: 23,
          point_y: 56,
          disabled: false,
          point_name: "xunluo5",
          children: [
            {
              value: 1,
              label: "行为23231",
            },
            {
              value: 2,
              label: "行为23232",
            },
            {
              value: 3,
              label: "行为435453",
            },
          ],
        },
        {
          point_x: 1,
          point_y: 46,
          disabled: false,
          point_name: "xunluo6",
          children: [
            {
              value: 1,
              label: "行为154464",
            },
            {
              value: 2,
              label: "行为2676768",
            },
            {
              value: 3,
              label: "行为3434332",
            },
          ],
        },
        {
          point_x: 3,
          point_y: 6,
          disabled: false,
          point_name: "xunluo7",
          children: [
            {
              value: 1,
              label: "行为165656",
            },
            {
              value: 2,
              label: "行为253343",
            },
            {
              value: 3,
              label: "行为3423232",
            },
          ],
        },
        {
          point_x: 13,
          point_y: 46,
          disabled: false,
          point_name: "xunluo8",
          children: [
            {
              value: 1,
              label: "行为1232424rwfwef",
            },
            {
              value: 2,
              label: "行为2fcsfs",
            },
            {
              value: 3,
              label: "行为3ssdsd",
            },
          ],
        },
      ],
      radio: "",
      checkedCities: [],
      allcheckedCities: [],
      cities: [],
      moState: false,
      pointList: [],
      pointBtn: [],
      allList: [],
      citiesList: [],
      options: [
        {
          value: "123",
          label: "456drf",
        },
      ],
      allPointList: [],
      pointBitHasBeenSelected: [],
      deleteList: [],
      scenarioId: null,
      behaviorState: false,
      detailObj: {},
      actionList: [],

      checkboxList: [],
    };
  },
  mounted() {
    const scenario_id = window.location.search.split("=")[1];
    this.scenarioId = scenario_id;
    this.handleDetailScenario(scenario_id);
  },
  methods: {
    // 详情
    handleDetailScenario(scenario_id) {
      const params = {
        scenario_id,
      };
      patrolInspectionTaskApi
        .scenarioDetail({
          params: {
            ...params,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.detailObj = res.data;
            this.arrList = res.data.point_json.map((item) => {
              return {
                ...item,
                disabled: false,
              };
            });
            // 这里是动作点位列表
            patrolInspectionTaskApi.actionList().then((res) => {
              if (res.code == 0) {
                console.log(res, "res111");
                if (Array.isArray(res.data.list)) {
                  this.actionList = res.data.list;
                  this.cities = res.data.list.map((item) => {
                    return item.action_name;
                  });
                }
              }
            });
          }
        })
        .catch((e) => {});
    },
    // 删除
    handleDelete() {
      console.log(
        this.pointBitHasBeenSelected,
        this.deleteList,
        "===pointBitHasBeenSelected"
      );
      let allListPoint = [];
      this.arrList.map((item) => {
        this.pointBitHasBeenSelected.map((citem) => {
          if (item.point_name == citem) {
            return allListPoint.push({
              ...item,
              disabled: true,
            });
          } else {
            return allListPoint.push({
              ...item,
              disabled: false,
            });
          }
        });
      });
      let listFilter = _.uniqWith(allListPoint, _.isEqual);
      let ListData = this.handleFormatData(listFilter);
      this.arrList = ListData;

      this.pointBitHasBeenSelected.map((item) => {
        this.allPointList.map((citem) => {
          if (item !== citem) {
            this.allPointList.push(item);
          }
        });
      });
      console.log(this.deleteList, this.citiesList, "4973573955739citiesList");
      if (this.pointBitHasBeenSelected.length == 0) {
        this.handleDetailScenario(this.scenarioId);
        this.citiesList = [];
        this.allPointList = [];
      }
      if (
        this.pointBitHasBeenSelected.length !== 0 ||
        this.allcheckedCities.length !== 0
      ) {
        let ListData = this.handleFormatData(listFilter);
        this.arrList = ListData;
        console.log(ListData, "arrList");
        console.log(this.allPointList, "this.allPointList");
        let pointList = [];
        this.allPointList.map((item) => {
          if (!this.deleteList.includes(item.point_name)) {
            pointList.push(item);
          }
        });
        this.allPointList = pointList;
        let newPointListData = [];
        this.citiesList.map((item) => {
          if (!this.deleteList.includes(item.point_name)) {
            newPointListData.push(item);
          }
        });
        this.citiesList = newPointListData;
        console.log(this.deleteList, "deleteListdeleteList");
        console.log(this.citiesList, "citiesListcitiesList");
        console.log(this.allcheckedCities, "allcheckedCities");
        // this.allcheckedCities = []
        let arrPoint = [];
        this.arrList.map((item) => {
          console.log(item, "====item");
          if (item.disabled) {
            arrPoint.push(item.point_name);
          }
        });
        this.checkboxList = arrPoint;
        this.allPointList = arrPoint;
        if (this.citiesList.length == 0) {
          this.handleDetailScenario(this.scenarioId);
        }
      }
    },
    // 清空
    handleEmpty() {
      this.handleDetailScenario(this.scenarioId);
      this.citiesList = [];
      this.allPointList = [];
      this.checkboxList = [];
    },
    // 选择巡逻点位
    radioChange(e) {
      console.log(e, this.arrList, "eeeeeeeeeee");
      this.allPointList = e;
      // let chboxList = [];
      // this.arrList.map((item) => {
      //   if (item.point_name == e) {
      //     chboxList = item.action_obj.map((citem) => {
      //       return String(citem.action_name);
      //     });
      //   }
      // });
      // console.log(chboxList, "chboxList");
      // this.behaviorState = true;
      // this.cities = chboxList;
      // debugger
      // chboxList ||
      this.moState = true;
      let newList = [];
      this.arrList.map((item) => {
        if (item.point_name == e) {
          return newList.push(item);
        }
      });
      this.pointList = newList;
    },
    // 所有点位行为部分
    checkboxChange(e) {
      console.log(e, "3333333");
      let newActionList = [];
      this.actionList.map((item) => {
        e.map((citem) => {
          if (item.action_name == citem) {
            newActionList.push(item);
          }
        });
      });
      this.pointBtn = newActionList;
    },
    // 没有点位的加入已选
    handleClickArrow() {
      console.log(this.allPointList, "====allPointList");
      console.log(this.arrList, "=====arrList");
      // let arr = []
      if (this.allPointList && this.allPointList.length !== 0) {
        this.arrList.map((item) => {
          this.allPointList.map((citem) => {
            if (item.point_name == citem) {
              this.citiesList = this.citiesList.concat(item);
              let ListData = this.handleFormatData(this.citiesList);
              this.citiesList = ListData;
            }
          });
        });

        let allListPoint = [];
        this.arrList.map((item) => {
          this.citiesList.map((citem) => {
            if (item.point_name == citem.point_name) {
              return allListPoint.push({
                ...item,
                disabled: true,
              });
            } else {
              return allListPoint.push({
                ...item,
                disabled: false,
              });
            }
          });
        });
        let listFilter = _.uniqWith(allListPoint, _.isEqual);
        let ListData = this.handleFormatData(listFilter);
        this.arrList = ListData;
        this.moState = false;
        this.radio = "";
        this.pointList = [];
        this.pointBtn = [];
        this.checkedCities = [];
        this.allcheckedCities = [];
      }
    },
    // 加入已选
    handleClick() {
      if (this.pointBtn.length !== 0) {
        // this.behaviorState = false;
        console.log(this.pointList, "this.pointList");
        let newList = this.pointList.map((item) => {
          return {
            ...item,
            action_obj:
              this.pointBtn.length !== 0 ? this.pointBtn : this.checkedCities,
          };
        });
        console.log(newList, "pointList");
        this.allPointList = this.allPointList.concat(newList);
        this.allList = newList;
        let actionList = newList.map((item) => {
          let actionText = [];
          if (Array.isArray(item.action_obj)) {
            item.action_obj.map((items) => {
              actionText.push(items.action_name);
            });
          }
          return {
            value: item.point_name,
            label: item.point_name + "[" + actionText.join("、") + "]",
          };
          // return {
          //   value: item.point_name,
          //   label: item.point_name + "[" + item.action_obj.join("、") + "]",
          // };
        });
        console.log(actionList, "actionList123");
        this.citiesList = this.citiesList.concat(actionList);
        console.log(this.citiesList, "this.citiesList3333");
        let allListPoint = [];
        this.arrList.map((item) => {
          this.citiesList.map((citem) => {
            if (item.point_name == citem.value) {
              return allListPoint.push({
                ...item,
                disabled: true,
              });
            } else {
              return allListPoint.push({
                ...item,
                disabled: false,
              });
            }
          });
        });
        let listFilter = _.uniqWith(allListPoint, _.isEqual);
        if (this.radio.length !== 0) {
          let ListData = this.handleFormatData(listFilter);
          this.arrList = ListData;
          console.log(ListData, "arrList");
        }
        this.moState = false;
        this.radio = "";
        this.pointList = [];
        this.pointBtn = [];
        this.checkedCities = [];
        this.allcheckedCities = [];
      }
    },
    // 已选点位选择部分
    checkboxHandleChange(e) {
      console.log(e, "33333");
      this.deleteList = e;
      let haspointList = [];
      let pointList = [];
      this.citiesList.map((item) => {
        if (!e.includes(item.point_name)) {
          haspointList.push(item.point_name);
          console.log(item.point_name, "itempoint_name");
        }
        // e.map((citem) => {
        //   if(item.point_name == citem) {
        //     pointList.push(item.point_name)
        //   } else {
        //     haspointList.push(item.point_name)
        //   }
        // })
      });
      console.log(haspointList, "haspointList");
      this.pointBitHasBeenSelected = haspointList;
      // this.citiesList = pointList
    },
    // 数据处理格式
    handleFormatData(arr) {
      let tempArr = [];
      arr.map((item) => {
        const hasItem = tempArr.find(
          (tempItem) => tempItem.point_name == item.point_name
        );
        if (hasItem) {
          if (item.disabled) {
            tempArr = tempArr.filter(
              (tempArr) => tempArr.point_name != item.point_name
            );
            tempArr.push(item);
          }
        } else {
          tempArr.push(item);
        }
      });
      return tempArr;
    },

    /**
     * 提交新增巡检任务
     *
     */
    patrolInspectionTaskSubmit() {
      console.log(this.allPointList, "allPointList");
      let pointList = [];
      this.arrList.map((item) => {
        this.allPointList.map((citem) => {
          if (item.point_name == citem) {
            pointList.push(item);
          }
        });
      });
      this.$refs.addForm.validate((valid, object) => {
        if (valid) {
          const params = {
            ...this.addForm,
            duration: "1000",
            scenario_no: this.detailObj.scenario_no,
            scenario_name: this.detailObj.scenario_name,
            point_obj: pointList, // 这个地方的数据是点位的数据，很重要
          };
          console.log(params, this.hour, this.minutes, "params1111");
          patrolInspectionTaskApi
            .jobSave({ data: { ...params } })
            .then((res) => {
              console.log(res, "122222res");
              if (res.code == 0) {
                this.$message({
                  type: 'success',
                  message: '新建任务成功'
                })
                this.handleGoback();
              }
            })
            .catch((e) => {});
        }
      });
    },
    handleGoback() {
      this.$router.push({
        path: `PatrolSceneManagement`,
      });
    },
    handleClose() {
      this.handleGoback();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 40px 20px 10px 20px;
  hr {
    background-color: #dcdfe6;
  }
  .point-selection {
    display: flex;
    margin-top: 20px;
    .left {
      width: 45%;
      display: flex;
      padding-right: 20px;
      p {
        width: 100px;
        font-size: 16px;
        text-align: right;
        padding-right: 10px;
      }
      .point-img-right {
        flex: 1;
        height: 500px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .right {
      width: 55%;
      background-color: #e4e7ed;
      padding: 15px 10px 10px;
      h3 {
        text-align: center;
        font-size: 18px;
        margin-bottom: 8px;
      }
      .right-flex {
        width: 100%;
        min-height: 440px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .all-point-bit {
          margin: 10px 0 10px 5px;
        }
        .right-left-box {
          width: 40%;
          background-color: #fff;
          border: 1px solid #e4e7ed;
          border-radius: 4px;
          .grou {
            height: 400px;
            display: flex;
            margin: 0 0 0 20px;
            div:nth-child(2) {
              padding-top: 8px;
            }
          }
        }
        .join-center {
          width: 20%;
          text-align: center;
          justify-content: center;
        }
        .right-clear {
          width: 40%;
        }
        .right-box {
          // width: 260px;
          height: 440px;
          background-color: #fff;
          border: 1px solid #f2f2f2;
          border-radius: 4px;
          .all-point-bit {
            margin: 10px 0 10px 5px;
          }
          .selected-point-bit {
            // margin-top: 15px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 36px;
            .point-content {
              padding-left: 15px;
              // overflow: hidden;
              // white-space: nowrap;
              // text-overflow: ellipsis;
              /deep/ .el-checkbox__label {
                width: 320px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
              }
            }
            .delete-clear {
              display: flex;
              justify-content: center;
              .clear-btn {
                flex: 1;
                width: 50%;
                color: #409eff;
                margin-left: 0;
              }
            }
          }
        }
      }
    }
  }
  .footer-submit {
    margin: 20px 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.back-top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  .back-btn {
    font-size: 16px;
    font-weight: 700;
  }
  p {
    @extend .back-btn;
  }
}
// /deep/ .el-checkbox:last-of-type {
//   margin-right: 30px;
// }
// /deep/ .el-checkbox__label {
//   width: 320px;
//   overflow: hidden;
//   white-space: nowrap;
//   text-overflow: ellipsis;
//   -o-text-overflow: ellipsis;
// }
/deep/ .el-checkbox {
  display: block;
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  padding: 5px 0;
}
/deep/ .el-icon-back:before {
  font-size: 16px;
  font-weight: 700;
}
/deep/ .el-radio {
  display: block;
  margin: 15px;
}
/deep/ .el-radio__inner::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 50%;
  height: 50%;
  border: 1px solid #fff;
  border-radius: 50%;
  // border-top: none;
  // border-right: none;
  background: transparent;
  transform: rotate(-45deg);
}
/deep/ .el-radio__input.is-checked .el-radio__inner::after {
  transform: rotate(-45deg);
  background-color: #fff;
}
/deep/ .el-radio__input.is-disabled .el-radio__inner {
  background-color: #797979;
}
/deep/ .el-radio__input.is-disabled .el-radio__inner::after {
  // cursor: not-allowed;
  // border: 2px solid #fff;
  // border-top: none;
  // border-right: none;
  background-color: #fff;
}
/deep/ .el-radio__input.is-disabled + span.el-radio__label {
  color: #797979;
}
</style>